<template>
    <div id="home">
        <nav-bar class="home-nav">
            <div slot="center">购物街</div>
        </nav-bar>
         <tab-contro ref="tabControl1"  :title="['流行','新款','精选']" v-show="isTabFixed" @tabCkick="tabCkick"  :class="{fexn:isTabFixed}"></tab-contro>
       <div class="wrapper" ref="wrapper">
       <div class="content">
        <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
       <recommend-view :recommends="recommends"></recommend-view>
       <featuer-view></featuer-view>
       <tab-contro ref="tabControl2"  :title="['流行','新款','精选']" @tabCkick="tabCkick" ></tab-contro>
       <goods-list :goods="goods[qiehuan].list"></goods-list>
       </div>
       </div>
       <back-top @click.native="backClick" v-show="isShow"></back-top>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import TabContro from 'components/content/tabcontro/TabContro'
import GoodsList from 'components/content/goods/GoodsList'
import BackTop from 'components/content/backTop/BackTop'



import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatuerView from './childComps/FeatuerView'

import {getHomeMultidata,getHomeGoods} from 'network/home.js'
import BScroll from 'better-scroll'
import {debounce} from 'common/utils'


export default {
    name:'Home',
    data(){
        return{
            banners:[],
            recommends:[],
            goods:{
                'pop':{page:0,list:[]},
                'new':{page:0,list:[]},
                'sell':{page:0,list:[]}
            },
           qiehuan:'pop',
           backtop:null,
           isShow:false,
           tabOffsetTop:0,
           isTabFixed:false
           
        }
    },
    components:{
        NavBar,
        TabContro,
        GoodsList,
        BackTop,
        HomeSwiper,
        RecommendView,
        FeatuerView
        
    },
    mounted(){
        
        
         //创建bscroll对象
                this.backtop=new BScroll(this.$refs.wrapper,{
                //在scroll里需要点击click：true
                click:true,
                //开启监听滚动事件
                probeType:3,
                //上拉加载更多
                pullUpLoad:true
                  
                   } ) 
            //监听滚动事件
         this.backtop.on('scroll',(position)=>{
                       if(position.y<-1000){
                           this.isShow=true
                       }else if(position.y>-1000){
                           this.isShow=false
                       }
                       if(position.y<-this.tabOffsetTop){
                           this.isTabFixed=true
                       }else if(position.y>-this.tabOffsetTop){
                           this.isTabFixed=false
                       }
                   })
                  //上拉加载更多
                   this.backtop.on('pullingUp',()=>{
                      this.getHomeGoods(this.qiehuan)
                   })
                  
    },
    created (){
      
        //监听图片是否加载完成
        this.$bus.$on('itemImageLoad',()=>{
            //更新高度
          
          debounce(this.backtop.refresh(),500)
          
        })
         
        //请求数据
       this.getHomeMultidata()
       //请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
      

    },
    methods:{
        //获取轮播图是否更新完
        swiperImageLoad(){
         this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop;
        },
       
        //点击返回顶部
        backClick(){
            this.backtop.scrollTo(0,0,500)
              
        },
        //监听滚动的位置
  
        //监听商品款式的点击
        tabCkick(index){
            switch(index){
                case 0:
                this.qiehuan='pop';
                break
                case 1:
                this.qiehuan='new';
                break
                case 2:
                this.qiehuan='sell';
                break
            }
            this.$refs.tabControl1.currentIndex=index
            this.$refs.tabControl2.currentIndex=index
            
        },
        //发送请求数据
        getHomeMultidata(){
            getHomeMultidata().then(res=>{
            this.banners=res.data.banner.list;
            this.recommends=res.data.recommend.list;
     
        })
        },
        //接收响应数据
        getHomeGoods(type){
            const page=this.goods[type].page+1
            getHomeGoods(type,page).then(res=>{
                this.goods[type].list.push(...res.data.list)
                this.goods[type].page+=1
                 //下拉刷新
                this.backtop.finishPullUp()
          })
      }
    }
}
</script>

<style scoped>
#home{
    padding-top: 44px;
   
    
}
.home-nav{
    background-color: var(--color-tint);
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 5;
}

.wrapper{
  
   height: 100vh;
   overflow: hidden;
    
}
.content{

 padding-bottom: 93px;
}
.fexn{
    position: relative;
    
    
}



</style>